<template>
	<view class="withdrawalMain">
		<view class="ableWithdrawalBlanceBox flex align-center justify-between">
			<view class="left">
				可提现总金额(元)
				<text>{{ totalBalance == "0" ? "0.00" : $tools.format(totalBalance) }}</text>
			</view>
			<text class="right" @click="$u.route('/pages/wallet/bankCard')">我的结算卡</text>
		</view>
		<view class="withdrawalCon">
			<view class="withdrawalBox">
				<view class="countBalanceBox flex align-center justify-between">
					<view :class="[
              tabCurent == 0
                ? 'item active flex align-center justify-between'
                : 'item flex align-center justify-between',
            ]" @tap="tabTap(0)">
						<view>
							<text>分润收入</text>
							<text>{{ $tools.format(balance) }}</text>
						</view>
						<u-icon name="hand-coin-fill" size="60" custom-prefix="custom-icon"></u-icon>
					</view>
					<view :class="[
              tabCurent == 1
                ? 'item active flex align-center justify-between'
                : 'item flex align-center justify-between',
            ]" @tap="tabTap(1)">
						<view>
							<text>返现收入</text>
							<text>{{ $tools.format(freeze_balance) }}</text>
						</view>
						<u-icon name="money-cny-circle-fill" size="60" custom-prefix="custom-icon"></u-icon>
					</view>
				</view>
				<view class="top">
					<text>提现金额</text>
					<view class="input solid-bottom flex align-center justify-between">
						<view class="left flex align-center">
							<u-icon class="uIcon" name="rmb" color="#333" size="60"></u-icon>
							<input type="text" class="input" disabled v-model="money" @input="moneyInput"
								@click="show = true" :placeholder="describe" placeholder-class="inputPlaceholder" />
							<u-keyboard ref="uKeyboard" safe-area-inset-bottom :dot-enabled="true" mode="number"
								tips="输入金额" v-model="show" @change="valChange" @backspace="backspace" @cancel="cancel"
								@confirm="confirm" :mask="false"></u-keyboard>
						</view>
						<view class="right" @click="allWithdrawTap">全部提现</view>
					</view>
				</view>
				<view class="sub">
					<view class="title flex align-center justify-between"><text>账户信息</text>
						<view class="flex align-center" style="display:none;">对公提现<u-icon class="uIcon"
								name="arrow-down" color="#f33" size="28"></u-icon>
						</view>
					</view>
					<view class="subItem solid-bottom">
						姓名：
						<text>{{ cardInfo.real_name }}</text>
					</view>
					<view class="subItem solid-bottom">
						结算卡：
						<text>{{ cardInfo.bank_name }}(尾号{{ cardInfo.card_last4 }})</text>
					</view>
<!-- 					<view class="withdrawChoose solid-bottom flex" v-if="userType == 'BJ'">
						提现账户：
						<view class="flex">
							<view class="flex align-center" style="margin-right: 50rpx;" @click="withdrawStatusTab(2)">
								<view class="radioView" :class="withdrawStatus == 2 ? 'active' : ''"></view>
								<view>对私提现</view>
							</view>
							<view class="flex align-center" @click="withdrawStatusTab(1)">
								<view class="radioView" :class="withdrawStatus == 1 ? 'active' : ''"></view>
								<view>对公提现</view>
							</view>
						</view>
					</view> -->
				</view>
				<view class="button">
					<button type="default" @click="withdrawBtn" :disabled="isClick">
						提现
					</button>
				</view>
			</view>
		</view>
		<!-- 提现说明 -->
		<view class="tipMain">
			<view class="tipBox">
				<text>提现说明：</text>
				<view>
					<text>1.提现到账时间：{{ withdrawSettings.cycle }}</text>
					<text>2.提现金额区间：最小金额{{ withdrawSettings.minMoney }},最大金额{{
              withdrawSettings.maxMoney
            }}</text>
					<text>3.提现手续费：每笔 {{ withdrawSettings.fee }} 元 </text>
					<text v-if="withdrawSettings.taxPoint" style="padding-left: 10rpx">+
						{{ withdrawSettings.taxPoint }}%的手续费</text>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<toast></toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCurent: 0,
				show: false,
				withdrawSettings: {},
				isClick: false,
				money: "",
				value: "",
				balance: "0.00",
				freeze_balance: "0.00",
				totalBalance: "0.00",
				cardInfo: {},
				withdrawStatus: 2,
				userType:'HJ',
				invoicing:'',
			};
		},
		computed: {
			describe() {
				let withdrawMoney = this.withdrawSettings.minMoney ?
					"最低" + this.withdrawSettings.minMoney + "元" :
					"请输入提现金额";
				withdrawMoney =
					this.withdrawSettings.maxMoney > 0 ?
					withdrawMoney + "，最高" + this.withdrawSettings.maxMoney + "元" :
					withdrawMoney;
				return withdrawMoney;
			},
		},
		onLoad() {
			this.getWithdrawSettings();
		},
		onShow() {
			this.userType = uni.getStorageSync("loginInfo").user_type;
			this.money = "";
			this.withdrawMoney();
			this.getBankCard();
		},
		methods: {
			tabTap(index) {
				this.tabCurent = index;
				this.money = "";
				if (index == 1) {
					this.withdrawStatus = 2
				}
			},
			// 可提现余额
			withdrawMoney() {
				this.$u.api
					.income()
					.then((res) => {
						if (res.status == 200) {
							let datas = res.result;
							this.balance = (datas.balance).replace(/,/g, '');
							this.freeze_balance = (datas.freeze_balance).replace(/,/g, '');
							let totalBalance = (parseFloat(this.balance) * 1000 + parseFloat(this.freeze_balance) *
								1000) / 1000;
							this.totalBalance = totalBalance.toFixed(2)
						}
					})
					.catch((res) => {
						if (res.errMsg == "request:fail timeout") {
							this.$u.toast("请求超时，请重试!");
						} else if (res.errMsg == "request:fail") {
							this.$u.toast("请求失败，请重试");
						} else {
							 this.$u.toast("请求失败，请重试");
						}
						this.$loading(false);
						setTimeout(() => {
							this.$u.route({
								type: "navigateBack",
								delta: 1,
							});
						}, 2000);
					});
			},
			// 银行卡信息
			getBankCard: function() {
				this.$u.api
					.myBankCard()
					.then((res) => {
						if (res.status == 200) {
							this.cardInfo = res.result;
							// this.invoicing = res.result.invoicing
						}
						let that = this;
					})
					.catch((res) => {
						if (res.errMsg == "request:fail timeout") {
							this.$u.toast("请求超时，请重试!");
						} else if (res.errMsg == "request:fail") {
							this.$u.toast("请求失败，请重试");
						} else {
							 this.$u.toast("请求失败，请重试");
						}
						this.$loading(false);
						setTimeout(() => {
							this.$u.route({
								type: "navigateBack",
								delta: 1,
							});
						}, 2000);
					});
			},

			// 提现账户选择
			withdrawStatusTab(status) {
				this.withdrawStatus = status
				if (this.tabCurent == 1) {
					this.withdrawStatus = 2
				}
			},

			// 全部提现
			allWithdrawTap() {
				let wdMoney;
				if (this.tabCurent == 0) {
					wdMoney = this.balance.replace(/,/g, "");
				} else if (this.tabCurent == 1) {
					wdMoney = this.freeze_balance.replace(/,/g, "");
				}
				if (wdMoney > 0) {
					this.money = wdMoney;
				} else {
					this.$refs.uToast.show({
						title: "可提现余额不足",
						type: "default",
						duration: 2000,
					});
				}
			},

			// 提现按钮点击验证
			withdrawBtn() {
				// if(this.invoicing == 0 && this.userType == 'BJ' && this.tabCurent == 0){
				// 	this.$refs.uToast.show({
				// 		title: "请先前往后台设置是否开票",
				// 		type: "warning",
				// 		duration: 2000,
				// 	});
				// 	return;
				// }
				// let phone = uni.getStorageSync("loginInfo").account;
				// if (phone.length < 11) {
				// 	this.$refs.uToast.show({
				// 		title: "手机号信息错误，请联系管理员",
				// 		type: "error",
				// 		duration: 1200,
				// 	});
				// 	return;
				// }

				if (this.money == "") {
					this.$refs.uToast.show({
						title: "请输入提现金额",
						type: "error",
						duration: 1200,
					});
					return;
				} else {
					this.receiveFlowWallet();
				}
			},


			// 提现接口调用
			receiveFlowWallet() {
				this.isClick = true;
				let params = {
					money: this.money,
					type: "T",
					// refund_status: this.invoicing == 0? 2 :this.invoicing
				};
				if (this.tabCurent == 0) {
					params.type = "T";
				} else if (this.tabCurent == 1) {
					params.type = "A";
				}
				this.$u.api.withdraw(params).then((res) => {
						this.value = "";
						if (res.status == 200) {
							this.$refs.uToast.show({
								title: res.msg,
								type: "success",
								duration: 1500,
							});
							setTimeout(() => {
								this.$u.route({
									url: "pages/wallet/withdrawalRecord",
									type: "redirect",
								});
							}, 1500);
						} else {
							this.isClick = false;
							this.$refs.uToast.show({
								title: res.msg,
								type: "error",
								duration: 2000,
							});
							this.money = "";
						}
					})
					.catch((res) => {
						if (res.errMsg == "request:fail timeout") {
							this.$u.toast("请求超时，请重试!");
						} else if (res.errMsg == "request:fail") {
							this.$u.toast("请求失败，请重试");
						} else {
							 this.$u.toast("请求失败，请重试");
						}
						this.$loading(false);
						setTimeout(() => {
							this.$u.route({
								type: "navigateBack",
								delta: 1,
							});
						}, 2000);
					});
			},

			//输入提现金额
			moneyInput(e) {
				let value = e.detail.value;
				value = value.match(/\d+(\.\d{0,2})?/) ?
					value.match(/\d+(\.\d{0,2})?/)[0] :
					"";
				this.money = value;
			},

			// 键盘输入与删除
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.value += val;
				let patternValue = /^(([1-9]{0}\d*)|(0{1}))(\.\d{0,2})?$/;
				if (patternValue.test(this.value)) {
					this.money = this.value;
				} else {
					this.value = this.money;
				}
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.value.length)
					this.value = this.value.substr(0, this.value.length - 1);
				let patternValue = /^(([1-9]{0}\d*)|(0{1}))(\.\d{0,2})?$/;
				if (patternValue.test(this.value)) {
					this.money = this.value;
				} else {
					this.value = this.money;
				}
			},
			cancel() {
				this.money = "";
				this.value = "";
			},
			confirm() {
				this.money = this.value;
			},
			//提现设置
			getWithdrawSettings() {
				this.$u.api
					.withdrawSettings()
					.then((res) => {
						if (res.status == 200) {
							this.withdrawSettings = res.result;
						} else {
							this.$refs.uToast.show({
								title: "网络错误，数据加载异常",
							});
						}
					})
					.catch((res) => {
						if (res.errMsg == "request:fail timeout") {
							this.$u.toast("请求超时，请重试!");
						} else if (res.errMsg == "request:fail") {
							this.$u.toast("请求失败，请重试");
						} else {
							 this.$u.toast("请求失败，请重试");
						}
						this.$loading(false);
						setTimeout(() => {
							this.$u.route({
								type: "navigateBack",
								delta: 1,
							});
						}, 2000);
					});
			},
		},
	};
</script>

<style lang="scss">
	.countBalanceBox {
		padding-bottom: 30rpx;
		background: #fff;

		.item {
			padding: 30rpx;
			background: #f1f1f1;
			border-radius: 8rpx;
			position: relative;
			width: 48%;
			color: #666;
			letter-spacing: 2rpx;

			&.active {
				background: #fb4535;
				color: #fff;
			}

			>view {
				text {
					display: block;

					&:first-of-type {
						font-size: 28rpx;
					}

					&:last-of-type {
						font-size: 42rpx;
						font-family: "numberFont";
						letter-spacing: 2rpx;
					}
				}
			}
		}
	}

	.ableWithdrawalBlanceBox {
		background-image: linear-gradient(to bottom, #fb4535, #fc6306);
		padding: 50rpx 0 150rpx 30rpx;

		.left {
			color: #fff;
			font-size: 28rpx;

			text {
				display: block;
				font-size: 60rpx;
				font-family: "numberFont";
				font-weight: bold;
				letter-spacing: 4rpx;
				padding-top: 10rpx;
			}
		}

		.right {
			width: 180rpx;
			background: rgba(255, 255, 255, 0.5);
			color: #fff;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 80rpx 0 0 80rpx;
			font-size: 28rpx;
			text-indent: 8rpx;
		}
	}

	.withdrawalCon {
		padding: 30rpx;

		.withdrawalBox {
			padding: 30rpx;
			background-color: #fff;
			margin-top: -150rpx;
			border-radius: 10rpx;

			.top {
				>text {
					font-size: 32rpx;
					font-weight: bold;
				}

				.input {
					.left {
						.input {
							padding-left: 20rpx;
							width: 440rpx;
							height: 140rpx;
						}

						text {
							font-size: 26rpx;
							color: #488ff0;
						}

						.uIcon {
							margin-right: 10rpx;
							opacity: 0.6;
						}

						input {
							font-size: 46rpx;
							font-weight: bold;
							width: 300rpx;
						}

						.inputPlaceholder {
							font-weight: 400;
							font-size: 36rpx;
						}
					}

					.right {
						color: #fb4535;
					}
				}
			}

			.sub {
				.title {
					font-size: 32rpx;
					font-weight: bold;
					margin-top: 30rpx;

					view {
						font-size: 28rpx;
						color: #f33;
						font-weight: 400;

						.uIcon {
							margin-left: 10rpx;
						}
					}
				}

				.subItem {
					line-height: 80rpx;

					text {
						font-weight: bold;
					}
				}

				.withdrawChoose {
					line-height: 80rpx;
					flex-direction: row;

					view {
						font-weight: bold;
					}

					.radioView {
						display: inline-block;
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						border: 2rpx solid #ccc;
						margin-right: 14rpx;

						&.active {
							border-color: #fff;
							background-color: #fff;
							position: relative;
							border: 2rpx solid #fb4535;

							&::before {
								content: '';
								display: block;
								width: 10rpx;
								height: 6rpx;
								background-color: #fb4535;
								transform: rotate(45deg);
								position: absolute;
								left: 6rpx;
								top: 18rpx;
							}

							&::after {
								content: '';
								display: block;
								width: 22rpx;
								height: 6rpx;
								background-color: #fb4535;
								transform: rotate(-45deg);
								position: absolute;
								left: 10rpx;
								top: 16rpx;
							}
						}
					}
				}

			}

			.button {
				padding-top: 30rpx;

				button {
					font-size: 32rpx;
					color: #fff;
					background-color: #fb4535;

					&::after {
						border: none;
					}
				}
			}
		}
	}

	.tipMain {
		padding: 30rpx;

		.tipBox {
			>text {
				font-size: 28rpx;
				font-weight: bold;
				color: #999;
			}

			>view {
				padding-top: 20rpx;
				font-size: 28rpx;
				line-height: 50rpx;

				text {
					display: inline-block;
					color: #999;
					width: 100%;
				}
			}
		}
	}
</style>
